var popup = {
    cache: {},
    cacheIndex: 5000,
    template: function (option) {
        var html = '';
        html += '<div class="dialog TA" style="z-index:' + popup.checkPopupZindex() + '">';
        html += '	<div class="dialog-bg"></div>';
        html += '	<div class="dialog-main TA ' + option.className;
        html += '	    " style="z-index:' + popup.checkPopupZindex() + ';width:' + option.width + 'px;height:' + option.height + 'px'
        html += '	    ;margin : -' + (option.height / 2 + 1) + 'px 0 0 -' + (option.width / 2 + 1) + 'px;">';
        html += '		<div class="dialog-title cl">';
        html += '			<div class="dialog-title-text">' + option.title + '</div>';
        html += '			<div class="dialog-close"><i class="fa fa-close"></i></div>';
        html += '		</div>';
        html += '		<div class="dialog-body custom-scroll theme-scroll" style="width:' + option.width + 'px;height:' + (option.height - 80) + 'px">';
        html += '		</div>';
        html += '		<div class="dialog-footer">';
        html += '		</div>';
        html += '	</div>';
        html += '</div>';
        return $(html);
    },
    renderButtons: function (setting, event) {
        for (var i = 0; i < setting.buttons.length; i++) {
            var element = setting.buttons[i];
            var defaultButtonSetting = {
                className: '',
                text: '',
                event: function (event) { },
            };
            var buttonSetting = $.extend({}, defaultButtonSetting, element);
            var buttonHtml = $('<div class="btn ' + buttonSetting.className + '">' + buttonSetting.text + '</div>');
            (function (buttonHtml, buttonSetting) {
                buttonHtml.click(function () {
                    buttonSetting.event(event);
                });
            })(buttonHtml, buttonSetting);
            event.html.find('.dialog-footer').append(buttonHtml);
        };
    },
    dialog: function (data) {
        var defaultSetting = {
            className: '',
            title: '',
            body: '',
            buttons: [],
            width: 600,
            height: 500,
            closeEvent: function (event) { },
        };
        var setting = $.extend({}, defaultSetting, data);
        this.closeEvent = setting.closeEvent;
        this.html = popup.template(setting);
        this.body = setting.body;
        this.html.find('.dialog-body').append(this.body);
        popup.renderButtons(setting, this);

        document.onkeydown = event => {
            if (event.keyCode == 27) {
                this.close();
            }
        };

        this.close = () => {
            document.onkeydown = function () { }
            this.closeEvent(this);
            this.html.remove();
        };
        
        $('body').append(this.html);
        this.html.find('.dialog-close').click(() => {
            this.close();
        });
    },
    checkPopupZindex: function () {
        popup.cacheIndex += 1;
        return popup.cacheIndex;
    },
};
module.exports = function (option) {
    return new popup.dialog(option);
};